import { Button, Form, Input, InputNumber, Modal, Slider, Switch } from "@arco-design/web-react";
import { SlidersOutlined } from "@arco-design/web-react/icon";

// import { UIComponents } from "./../../../pages/editor/consts";

import ColorPicker from "./../colorPicker";
import CodeMirror from "./../dataItem/codemirror";
import CuSelect from "./select";
import CuFile from "./file";
import CuDataConfig from "../cuDataConfig";
import { UIComponents } from "components/editor/main/consts";

const { PropertyType } = UIComponents;
// const { TextArea } = Input;

export const renderFormItem = {
	[PropertyType.Number]: cItem => {
		return (
			<Form.Item hidden={cItem.hidden} label={cItem.label} name={cItem.name} field={cItem.name}>
				<InputNumber />
				{/* {cItem.name === "opacity" ? <Slider /> : <InputNumber />} */}
			</Form.Item>
		);
	},
	[PropertyType.String]: cItem => {
		return (
			<Form.Item hidden={cItem.hidden} label={cItem.label} name={cItem.name} field={cItem.name}>
				<Input />
			</Form.Item>
		);
	},
	[PropertyType.Boolean]: cItem => {
		return (
			<Form.Item valuePropName="checked" hidden={cItem.hidden} label={cItem.label} name={cItem.name} field={cItem.name}>
				<Switch size="small" />
			</Form.Item>
		);
	},
	[PropertyType.Object]: cItem => {
		return (
			<Form.Item hidden={cItem.hidden} label={cItem.label} name={cItem.name} field={cItem.name}>
				<Input />
			</Form.Item>
		);
	},
	[PropertyType.Array]: cItem => {
		return (
			<Form.Item hidden={cItem.hidden} label={cItem.label} name={cItem.name} field={cItem.name}>
				<Input />
			</Form.Item>
		);
	},
	[PropertyType.ArrayType]: (cItem, cData) => {
		return (
			<>
				<CuSelect cItem={cItem} cData={cData}></CuSelect>
			</>
		);
	},
	[PropertyType.Color]: cItem => {
		// console.log(cItem);
		return (
			<Form.Item hidden={cItem.hidden} label={cItem.label} name={cItem.name} field={cItem.name}>
				<Input />
				{/* <ColorPicker item={cItem} /> */}
			</Form.Item>
		);
	},
	[PropertyType.Image]: cItem => {
		return (
			<Form.Item hidden={cItem.hidden} label={cItem.label} name={cItem.name} field={cItem.name}>
				<Input />
			</Form.Item>
		);
	},
	[PropertyType.File]: cItem => {
		return (
			<Form.Item hidden={cItem.hidden} label={cItem.label} name={cItem.name} field={cItem.name}>
				<CuFile item={cItem}></CuFile>
			</Form.Item>
		);
	},
	[PropertyType.Font]: cItem => {
		return (
			<Form.Item hidden={cItem.hidden} label={cItem.label} name={cItem.name} field={cItem.name}>
				<Input />
			</Form.Item>
		);
	},
	[PropertyType.Data]: (cItem, cData) => {
		// console.log("dddddd: ", cData);
		return (
			<Form.Item hidden={cItem.hidden} label={cItem.label} name={cItem.name} field={cItem.name} className="cu-form-item-data">
				<CodeMirror item={cItem} cData={cData} />
			</Form.Item>
		);
	},
	[PropertyType.UIData]: (cItem, cData) => {
		return (
			<Form.Item hidden={cItem.hidden} label={cItem.label} name={cItem.name} field={cItem.name} className="cu-form-item-button">
				<Button
					type="primary"
					onClick={() => {
						Modal.info({
							title: null,
							content: <CuDataConfig />,
							footer: null,
							onCancel() {},
							onOk() {}
						});
					}}>
					<SlidersOutlined />
					配置数据
				</Button>
			</Form.Item>
		);
	}
};
